<template>
  <div class="shell">

    <comment></comment>

    <div class="article-info">
      <img class="cover" :src="articleInfo.cover || '/public/img/article-default.jpg'" alt="">
      <h2>{{ articleInfo.title }}</h2>
      <div class="author">
        <img :src="articleInfo.iconUrl || '/public/img/default.jpg'" alt="">
        {{ articleInfo.nickName }}
      </div>
      <div class="article-text" >
        <article class="editor-content-view" v-html="articleInfo.content"></article>
        <el-skeleton style="width: 100%" :loading="loading" :throttle="500" :rows="5" animated/>
      </div>
    </div>
    <div class="icons">
      <div class="item" :class="{liked: articleInfo.isLiked}">
        <svg @click="like" class="icon">
          <use xlink:href="#icon-dianzan"></use>
        </svg>
      </div>
      <span>{{ articleInfo.goodCount }}{{ articleInfo.isLiked ? ' 已赞同' : ' 赞同' }}</span>
      <div class="item" @click="openCommentDialog">
        <svg class="icon">
          <use xlink:href="#icon-pinglun"></use>
        </svg>
      </div>
      <span>{{ articleInfo.commentCount }} 评论</span>
      <div class="item">
        <svg class="icon">
          <use xlink:href="#icon-shoucang"></use>
        </svg>
      </div>
      <span>收藏</span>
      <div class="item">
        <svg class="icon">
          <use xlink:href="#icon-fenxiang"></use>
        </svg>
      </div>
      <span>分享</span>
    </div>
  </div>
</template>

<script setup>
import "@/styles/editor.scss"
import {useArticleStore} from "@/store/articleStore.js";
import {storeToRefs} from "pinia";
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import Comment from "@/views/components/article/CommentDialog.vue";
import {useCommentStore} from "@/store/commentStore.js";

const {params} = useRoute();

const articleStore = useArticleStore();
const {articleInfo} = storeToRefs(articleStore);
const commentStore = useCommentStore();
//加载动画
let loading = ref(true)
const getArticleInfo = async () => {
  //获取路径中的articleId
  await articleStore.getArticleInfo(params.articleId)
  loading.value = false
  //todo 图片加载闪烁
}

/**
 * 帖子点赞
 * @returns {Promise<void>}
 */
const like = async () => {
  await articleStore.likeArticle(articleInfo.value.articleId)
  if (articleInfo.value.isLiked) {
    articleInfo.value.isLiked = 0
    articleInfo.value.goodCount -= 1
  } else {
    articleInfo.value.isLiked = 1
    articleInfo.value.goodCount += 1
  }
}

let {showCommentDialog} = storeToRefs(commentStore);

/**
 * 评论弹窗回调
 */
function openCommentDialog() {
  showCommentDialog.value = !showCommentDialog.value
}

onMounted(() => {
  getArticleInfo()
})


</script>

<style lang="scss" scoped>
@import "@/styles/var";
.shell {
  width: 100%;
  display: flex;
  justify-content: center;
}

.article-info {
  width: 60%;
  padding: 2rem;
  background-color: $color-board;

  .cover {
    margin-bottom: 2rem;
    width: 100%;
    object-fit: fill;
  }

  h2 {
    font-size: 1.5rem;
    font-weight: bold;
  }

  .author {
    margin: 2rem 0;
    display: flex;
    align-items: center;

    img {
      border-radius: 50%;
      width: 2rem;
      height: 2rem;
      margin-right: 1rem;
      transition: all 500ms;
    }
  }
}

.icons {
  position: fixed;
  top: 50%;
  right: 20%;
  transform: translateY(-50%);
  color: rgb(132, 147, 165);
  text-align: center;
  align-items: center;

  span {
    font-size: 0.8rem;
  }

  .item {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: rgb(230, 240, 253);
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .icon {
      font-size: 2rem;
      display: flex;
      transition: all 0.3s;
    }

  }

  .item.liked {
    background-color: rgb(5, 109, 232);
    color: #dddddd;
  }


  .item:hover {
    color: rgb(128, 128, 128);
    cursor: pointer;

    .icon {
      font-size: 2.2rem;
    }
  }
}
</style>